import React, { useState } from 'react';
import { 
  Spinner, 
  TextField, 
  Button,
  Thumbnail
} from '@shopify/polaris';

interface ProductListProps {
  onSelectProduct: (product: any) => void;
}

interface Product {
  id: string;
  title: string;
  images: {
    id: string;
    src: string;
    position: number;
  }[];
  variants: {
    id: string;
    price: string;
  }[];
}

// 示例商品数据
const sampleProducts: Product[] = [
  {
    id: "product1",
    title: "示例商品 1",
    images: [
      {
        id: "img1",
        src: "https://via.placeholder.com/150",
        position: 1
      }
    ],
    variants: [
      {
        id: "var1",
        price: "99.00"
      }
    ]
  },
  {
    id: "product2",
    title: "示例商品 2",
    images: [
      {
        id: "img2",
        src: "https://via.placeholder.com/150",
        position: 1
      }
    ],
    variants: [
      {
        id: "var2",
        price: "199.00"
      }
    ]
  }
];

const ProductList: React.FC<ProductListProps> = ({ onSelectProduct }) => {
  const [products] = useState<Product[]>(sampleProducts);
  const [searchTerm, setSearchTerm] = useState<string>('');
  
  const filteredProducts = searchTerm 
    ? products.filter(p => 
        p.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
        p.id.includes(searchTerm)
      )
    : products;
    
  const handleProductSelect = (product: Product) => {
    onSelectProduct(product);
  };
  
  return (
    <div className="product-list overflow-hidden">
      <div className="mb-4 mt-4">
        <TextField
          label="搜索商品"
          value={searchTerm}
          onChange={setSearchTerm}
          placeholder="输入商品名称或ID"
          autoComplete="off"
          clearButton
          onClearButtonClick={() => setSearchTerm('')}
        />
      </div>
      
      <div className="overflow-y-auto max-h-[400px] pr-2 -mr-2">
        <div className="grid grid-cols-1 gap-3">
          {filteredProducts.length > 0 ? (
            filteredProducts.map(product => (
              <div 
                key={product.id} 
                className="border rounded p-3 cursor-pointer hover:bg-blue-50 transition-colors duration-200"
                onClick={() => handleProductSelect(product)}
              >
                <div className="flex items-center space-x-3">
                  {product.images && product.images.length > 0 ? (
                    <div className="w-14 h-14 flex-shrink-0 overflow-hidden rounded border">
                      <Thumbnail
                        source={product.images[0].src}
                        alt={product.title}
                      />
                    </div>
                  ) : (
                    <div className="w-14 h-14 bg-gray-200 flex items-center justify-center text-xs rounded flex-shrink-0">
                      无图
                    </div>
                  )}
                  <div className="flex-1 min-w-0">
                    <div className="truncate font-medium text-sm">{product.title}</div>
                    <div className="text-sm text-green-600 font-medium mt-1">
                      ¥{product.variants[0].price}
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="text-center py-8 text-gray-500">
              没有找到匹配的商品
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ProductList; 